<template>
  <el-tabs v-model="tabIndex" v-if="tabs.length > 0">
    <el-tab-pane :label="tab.label" :name="tab.name" v-for="(tab, index) in tabs" :key="index">
      <div style="width: 100%;max-height: 300px;overflow: hidden auto">
        <div style="width: 400px;">
          <tbc-dynamic-form class="compact" :form="tab.form" @change="onChangeForm"
                            label-width="100px"/>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="组件数据" name="data" v-if="cols.length > 1">
      <tbc-dynamic-table max-height="300px" :cols="cols" :data="dataList" :sortable="true" @change="onChangeForm">
        <template #image="scope">
          <el-input v-model="scope.row.image">
            <template #append>
              <el-button icon="el-icon-upload" @click="showFileManager(scope.index)">选择
              </el-button>
            </template>
          </el-input>
        </template>
        <template #link="scope">
          <el-input v-model="scope.row.link">
            <el-button icon="el-icon-upload" @click="showLink(scope.$index)">选择
            </el-button>
          </el-input>
        </template>
      </tbc-dynamic-table>
    </el-tab-pane>
  </el-tabs>
  <tbc-file-manager ref="file" @select="onFileSelected"></tbc-file-manager>
</template>
<script lang="ts">
import {defineComponent, reactive, toRefs, PropType, Ref, ref} from 'vue'

interface ComponentProps {
  index?: number
}

export default defineComponent({
  props: {
    index: {
      type: Number as PropType<number>,
      default() {
        return -1
      }
    }
  },

  setup(props: any, {emit}) {

    const file: Ref = ref(null)
    let index = 0
    const onButtonClick = (data, code, index) => {
      if (code === 'add') return addDataItem()
      if (code === 'delete' && state.dataList.length) {
        return state.dataList.splice(index, 1)
      }
    }

    const state = reactive({
      tabs: [],
      tabIndex: 'outer',
      cols: [],
      dataList: [],
      module: {
        item: {},
        setting: [],
        config: {}
      },
      action: {
        label: '操作', prop: 'action', type: 'action', width: 100, field: 'action', circle: true,
        click: onButtonClick,
        button: [
          {code: 'add', type: 'primary', icon: 'el-icon-plus'},
          {code: 'delete', type: 'danger', icon: 'el-icon-delete'}
        ]
      }
    })

    const init = (module) => {
      state.module = module
      console.log(module);
      // state.tabIndex = module.setting[0].name
      (state.cols as any[]) = [...module.cols, state.action]
      state.dataList = module.data
      buildTabList()
      if (!state.dataList.length) {
        addDataItem()
        if (module.type === 'menu') {
          for (let i = 0; i < 7; i++) addDataItem()
        }
      }
    }

    const buildTabList = () => {
      let tabs = [];
      (state.module.setting).forEach(item => tabs.push(item))
      state.tabs = tabs
    }

    const addDataItem = () => {
      if (!state.module.item) return
      let item = JSON.parse(JSON.stringify(state.module.item))
      item.id = new Date().getTime();
      (state.dataList as any[]).push(item)
    }
    //   getConfig(module) {

    //   },

    const getConfig = (module): Record<string, any> => {
      const configs: Record<string, any> = {}
      module.setting.forEach(config => {
        let settings = {}
        config.form.forEach(setting => {
          settings[setting.field] = setting.value
        })
        configs[config.name] = settings
      })
      return configs
    }

    const onChangeForm = () => {
      console.log(getConfig(state.module));
      state.module.config = getConfig(state.module)
      emit('change', props.index, state.module)
      // this.module.config = this.getConfig(this.module)
      // this.$emit('change', this.index, this.module)
    }


    // const init = (module) => {

    //   this.onChangeForm()
    // }
    // const setTabPane = () => {
    //   let tabs = []
    //   state.module.setting.forEach(item => tabs.push(item))
    //   state.tabs = tabs
    // }

    const showFileManager = (fileIndex) => {
      console.log(fileIndex)
      index = fileIndex
      file.value.show()
    }

    const onFileSelected = (files) => {
      state.dataList[index].image = files[0].file_url
      console.log(files)
    }

    return {
      ...toRefs(state),
      init,
      file,
      onChangeForm,
      getConfig,
      showFileManager,
      onFileSelected
    }
  }
})
</script>
